<template>
  <div class="api-key-container">
    <p v-for="key in keyList" :key="key.id">
      <span>{{ key.apiKey }}</span>
      <el-button size="small" type="text" @click="deleteKey(key.id)">删除</el-button>
    </p>
    <el-button type="primary" @click="submit">新增</el-button>
  </div>
</template>

<script setup>
import { listMyKey, delKey, addKey } from "@/api/system/key";

const { proxy } = getCurrentInstance();

const keyList = ref([])

function submit() {
  addKey().then(response => {
    getMyApiKey()
    proxy.$modal.msgSuccess("新增成功");
  });
};

function deleteKey(id) {
  delKey(id).then(response => {
    getMyApiKey()
    proxy.$modal.msgSuccess("删除成功");
  });
};

const getMyApiKey = () => {
  listMyKey().then(response => {
    console.log(response.rows)
    keyList.value = response.rows
  })
}

getMyApiKey()
</script>

<style  scoped lang="less">
  .api-key-container {
    p {
      line-height: 20px;
      font-size: 14px;
      margin: 8px 20px 8px 0;

      span {
        display: inline-block;
        width: 300px;
        margin-right: 20px;
        color: var(--el-text-color-regular)
      }
    }
  }
</style>